<template>
  <el-upload
    class="form-step__uploader"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleUploadSuccess"
    :before-upload="beforeUpload"
  >
    <i class="icon" :class="uploading ? 'el-icon-loading' : 'el-icon-plus'"></i>
    <p class="name active" v-if="fileName" :title="fileName">{{ fileName }}</p>
    <p class="name" v-else>{{ name }}</p>
  </el-upload>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    // 用来判断使用的是哪个上传控件
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      uploading: false,
      fileName: ''
    }
  },
  methods: {
    handleUploadSuccess(res, file) {
      this.uploading = false
      const fileId = res.id
      const fileName = file.raw.name
      this.fileName = fileName
      this.$emit('onUploadSuccess', {
        id: fileId,
        type: this.type,
        name: fileName
      })
    },
    beforeUpload(file) {
      this.uploading = true
      return true
    }
    // 文件上传一般不会直接使用action来指定上传地址，而是统一使用axios
    // 这时action可以随便填个字符串(action是必填参数，不能为空)
    // beforeUpload(file) {
    //   const formData = new FormData();
    //   formData.append("portrait", file);
    //   formData.append("userId", "1234565");
    //   api.common.upload(formData).then(res => {

    //   })
    //   return false; //返回false是为了阻止默认的的上传
    // }
  }
}
</script>

<style lang="scss">
.form-step__uploader {
  .el-upload {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    padding-top: 30px;

    &:hover {
      border-color: var(--theme);
    }

    .icon {
      font-size: 24px;
      color: $black6;
    }

    .name {
      @include text-ellipsis-single;
      margin-top: 10px;
      font-size: 12px;

      &.active {
        color: #67c23a;
      }
    }
  }
}
</style>
